import { Card, Row, Col, Statistic } from 'antd';
import { useLoaderData } from '@remix-run/react';
import { json, LoaderFunction } from '@remix-run/node';
import { categoryApi, knowledgeApi, questionApi } from '~/services/api';

export const loader: LoaderFunction = async () => {
  try {
    const [categories, knowledge, questions] = await Promise.all([
      categoryApi.list({ page: 1, size: 10 }),
      knowledgeApi.list({ page: 1, size: 10, categoryId: 0 }),
      questionApi.list({ page: 1, size: 10 }),
    ]);

    return json({
      categoryCount: categories?.data?.total || 0,
      knowledgeCount: knowledge?.data?.total || 0,
      questionCount: questions?.data?.total || 0,
    });
  } catch (error) {
    console.error('Dashboard loader error:', error);
    return json({
      categoryCount: 0,
      knowledgeCount: 0,
      questionCount: 0,
    });
  }
};

export default function Dashboard() {
  const data = useLoaderData<typeof loader>();

  return (
    <div>
      <h2 className="text-2xl font-bold mb-6">仪表盘</h2>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="分类总数"
              value={data.categoryCount}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="知识点总数"
              value={data.knowledgeCount}
              valueStyle={{ color: '#1677ff' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="题目总数"
              value={data.questionCount}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
}